Ext.define('ProjectAON.view.home.Login' ,{
    extend: 'Ext.panel.Panel',
    alias: 'widget.login',
    title: 'Login',

    initComponent: function() {

        Ext.applyIf(this, {
            layout:'fit',
            items:[
                {
                    xtype:'window',
                    title: 'login',
                    autoShow:true,
                    resizable: false,
                    draggable: false,
                    closable: false,
                    loadMask:true,
                    width: 300,
                    height: 120,
                    items:[
                        {
                            xtype:'form',
                            defaults: {
                                allowBlank: false,
                                msgTarget: 'side',
                                listeners: {
                                    specialkey: function(field, e){
                                        if (e.getKey() == e.ENTER && Ext.getCmp('username').isValid() && Ext.getCmp('password').isValid()) {
                                            var element = Ext.getCmp('login');
                                            element.fireEvent('click',element);
                                        }
                                    }
                                }
                            },
                            items:[
                                {
                                    xtype:'textfield',
                                    id :'username',
                                    name:'username',
                                    fieldLabel:'Gebruikersnaam',
                                    emptyText: 'username',
                                    blankText: 'Gelieve een username in te vullen.',
                                    vtype: 'username'
                                },
                                {
                                    xtype:'textfield',
                                    inputType: 'password',
                                    id:'password',
                                    name:'password',
                                    fieldLabel:'Paswoord',
                                    emptyText: 'password',
                                    blankText: 'Gelieve een wachtwoord in te vullen.',
                                    vtype: 'password'
                                },
                                {
                                    xtype:'button',
                                    text:'Aanmelden',
                                    id:'login',
                                    action:'login',
                                    formBind: true,
                                    cls: 'loginButton'
                                }
                            ]

                        }
                    ]
                }
            ]
        });
        this.callParent(arguments);
    }
});

Ext.onReady(function() {
    var usernameRegex = /^[a-zA-Z0-9]*$/,
        passwordRegex = /^[a-zA-Z0-9]*$/;

    Ext.apply(Ext.form.field.VTypes, {
        username:  function(v) {
            return usernameRegex.test(v);
        },
        usernameText: 'Gebruikersnaam mag geen speciale tekens bevatten.',

        password:  function(v) {
            return passwordRegex.test(v);
        },
        passwordText: 'Wachtwoord mag geen speciale tekens bevatten.'
    });
});


